<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>教育经历</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../css/mui.picker.css" />
	<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
	<link rel="stylesheet" href="../css/mui.poppicker.css" />
	<style>
		.mui-input-group .mui-input-row {
			height: 55px;
		}
		.mui-input-row label {
			padding: 0 15px;
			line-height: 55px;
		}
		.mui-input-row label~input {
			margin-top: 7px;
		}
		.mui-input-row label~input::-webkit-input-placeholder {
			color: #999;
		}
		.mui-input-row label,label~input {
			font-family: 'PingFangSC-Regular';
		    font-size: 14px;
		    color: #666666;
		}
		.down-select {
			float: right;
			width: 65%;
			font-family: 'PingFangSC-Regular';
		    font-size: 14px;
		    color: #666666;
		    line-height: 55px;
		}
		.down-select label {
			width: 80%;
			padding: 0;
			color: #333;
		}
		.down-select img {
			float: right;
			margin-top: 10px;
			margin-right: 18px;
			width: 28px;
		    height: 28px;
		    vertical-align: middle;
		}
		.mui-input-row .label-title {
			width: 100%;
			background: #FAFAFA;
			text-align: center;
			font-size: 16px;
			color: #333333;
		}
		.educationId-div {
			display: none;
		}
	</style>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">教育经历</h1>
	</header>
	<div class="mui-content">
		<form class="mui-input-group" style="padding-bottom: 10px;">
			<div class="mui-input-row">
				<label>是否有教育经历</label>
				<div id="showEducation" class="down-select">
					<label id="educationResult">否</label>
					<img src="../img/detail/down_color_icon.png" />
				</div>
			</div>
			<div id="addEducationRow" style="display: none;" class="mui-input-row">
				<label>教育经历</label>
				<input style="float: left; width: 50%" type="text" placeholder="注：可添加多段教育经历" readonly="readonly"></input>
				<button id="addCard" style="float: right;margin: 12px 0px 0 0;padding: 10px 0px;color: #FF4747;" type="button" class="mui-btn mui-btn-link">+新增</button>
			</div>
			<div id="educationCard" style="display: none; margin-bottom: 50px;">
				<!--<div class="mui-card" style="padding-bottom: 10px;">
					<ul class="mui-table-view">
						<div class="mui-input-row">
							<label class="label-title">教育经历1</label>
						</div>
						<div class="mui-input-row">
							<label>教育程度</label>
							<div class="down-select showQualification">
								<label class="qualificationResult"></label>
								<img src="../img/detail/down_color_icon.png" />
							</div>
						</div>
						<div class="mui-input-row">
							<label>学校名称</label>
							<input type="text" placeholder="请填写学校名称" value="" >
						</div>
						<div style="display: none;" class="mui-input-row major">
							<label>专业名称</label>
							<input type="text" placeholder="请填写专业名称" value="" >
						</div>
						<div class="mui-input-row">
							<label>学校所在国家</label>
							<input type="text" placeholder="" value="中国" >
						</div>
						<div class="mui-input-row">
							<label>学校地址</label>
							<div class="down-select showCityPicker">
								<label class="cityResult">省 市 区</label>
								<img src="../img/detail/down_color_icon.png" />
							</div>
						</div>
						<div class="mui-input-row">
							<label></label>
							<input type="text" placeholder="详细地址（精确到门牌号）" value="" >
						</div>
						<div class="mui-input-row">
							<label>入学时间</label>
							<div data-options='{"type":"date"}' class="down-select showDatePicker">
								<label class="dateResult"></label>
								<img src="../img/detail/down_color_icon.png" />
							</div>
						</div>
						<div class="mui-input-row">
							<label>毕业时间</label>
							<div data-options='{"type":"date"}' class="down-select showDatePicker">
								<label class="dateResult"></label>
								<img src="../img/detail/down_color_icon.png" />
							</div>
						</div>
					</ul>	
				</div>	-->
			</div>
		</form>	
		<div class="transaction-container"><button type="button">保存</button></div>
	</div>	
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.min.js"></script>
	<script type="text/javascript" src="../js/thirdparty/mui.poppicker.js"></script>
	<script src="../js/thirdparty/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/thirdparty/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="../js/utils/regular.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var customerId = base.getParameter("customerId");
		var applyCustomerId = base.getParameter("applyCustomerId");
		var educationOtherId = null;
		(function($, doc) {
			$.init();
			getEducationListData();
			//是否有教育经历
			var educationPicker = new $.PopPicker();
			educationPicker.setData([{
				value: '1',
				text: '是'
			}, {
				value: '2',
				text: '否'
			}]);
			var showEducation = doc.getElementById('showEducation');
			var educationResult = doc.getElementById('educationResult');
			showEducation.addEventListener('tap', function(event) {
				educationPicker.show(function(items) {
					educationResult.innerText = _getParam(items[0], "text");
					if (_getParam(items[0], "value") == 1) {
						yesEducation();//有教育经历
					}else {
						noEducation();//没有教育经历
					}
				});
			}, false);
			//学历
			var qualificationPicker = new $.PopPicker();
			qualificationPicker.setData([{
				value: '1',
				text: '博士'
			}, {
				value: '2',
				text: '研究生'
			}, {
				value: '3',
				text: '本科'
			}, {
				value: '4',
				text: '大专'
			}, {
				value: '5',
				text: '高中'
			}, {
				value: '6',
				text: '初中'
			}, {
				value: '7',
				text: '小学'
			}]);
			$(".mui-input-group").on('tap', '.showQualification', function(e){
				var _self = this;
				qualificationPicker.show(function(items) {
					jQuery(_self).closest(".mui-card").find(".qualificationResult").html(_getParam(items[0], "text"));
					if (_getParam(items[0], "value") < 5) {
						jQuery(_self).closest(".mui-card").find(".major").show();
					}else{
						jQuery(_self).closest(".mui-card").find(".major").hide();
					}
				});
			});
			//三级联动
			var cityPicker3 = new $.PopPicker({
				layer: 3
			});
			cityPicker3.setData(cityData3);
			$(".mui-input-group").on('tap', '.showCityPicker',function(e) {
				var _self = this;
				cityPicker3.show(function(items) {
					var result = _getParam(items[0], 'text') + "-" + _getParam(items[1], 'text') + "-" + _getParam(items[2], 'text');
					jQuery(_self).find(".cityResult").html(result);
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			}, false);
			//时间选择器
			$(".mui-input-group").on('tap', '.showDatePicker',function(e) {
				var _self = this;
				if(_self.picker) {
					_self.picker.show(function (rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				} else {
					var optionsJson = this.getAttribute('data-options') || '{}';
					var options = JSON.parse(optionsJson);
					_self.picker = new $.DtPicker(options);
					_self.picker.show(function(rs) {
						jQuery(_self).find(".dateResult").html(rs.text);
						_self.picker.dispose();
						_self.picker = null;
					});
				}
			}, false);
			
		})(mui, document);	
		var defaultEducation = {
			educationEndTime: "至今则不填",
			schoolProvince: "省",
			schoolCity: "市",
			schoolArea: "区",
			schoolDetailed: "",
			schoolName: "",
			professionalName: "",
			educationId: "",
			educationStartTime: "",
			schoolCountry: "中国",
		}
		function yesEducation(){
			$("#addEducationRow").show();
			$("#educationCard").show();
			$("#educationCard").prepend(htmlCard(defaultEducation));
		}
		function noEducation(){
			$("#addEducationRow").hide();
			$("#educationCard").hide();
		}
		//添加教育经历
		$("#addCard").on("tap",function(){
			$("#educationCard").prepend(htmlCard(defaultEducation));
		});
		$("#educationCard").on("input  propertychange","input[name='schoolCountry']",function(){
			console.log(this.value);
			if (this.value == "中国") {
				$(this).closest(".mui-card").find(".addrSelect").show();
			} else {
				$(this).closest(".mui-card").find(".addrSelect").hide();
			}
		});
//		$("body").on("blur","input[name='schoolCountry']",function(){
//			console.log(this.value);监听离开焦点后输入框的内容
//		});
		//删除教育经历
		$("#educationCard").on('tap', '.delCard', function(){
			var _educationId = $(this).closest(".mui-card").find(".educationId-div").text();
			var _self = $(this);
			if (_educationId) {
				base.postData(base.url.delEducationInfo,{educationId: _educationId},function(data) {
					mui.toast(data.message);
					if (data.success) {
						_self.closest(".mui-card").remove();
						var cardLength = $("#educationCard").find(".mui-card").length;
						$("#educationCard .label-title").each(function(i, e){
							_self.html("教育经历"+cardLength);
							cardLength --;
						});
					}
				});
			} else {
				_self.closest(".mui-card").remove();
				var cardLength = $("#educationCard").find(".mui-card").length;
				$("#educationCard .label-title").each(function(i, e){
					_self.html("教育经历"+cardLength);
					cardLength --;
				});
			}
		});
		function htmlCard(item) {
			var cardLength = $("#educationCard").find(".mui-card").length + 1;
			var html = '<div class="mui-card" style="padding-bottom: 10px;">'+
						'	<div class="educationId-div">'+item.educationId+'</div>'+
						'	<ul class="mui-table-view">'+
						'		<div class="mui-input-row">'+
						'			<label class="label-title">教育经历'+cardLength+'</label>'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>教育程度</label>'+
						'			<div class="down-select showQualification">'+
						'				<label class="qualificationResult">'+getEducationStr(item.educationType)+'</label>'+
						'				<img src="../img/detail/down_color_icon.png" />'+
						'			</div>'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>学校名称</label>'+
						'			<input type="text" placeholder="请填写学校名称" name="schoolName" value="'+item.schoolName+'" >'+
						'		</div>'+
						'		<div style="display: '+(item.educationType < 5 ? 'block':'none')+'" class="mui-input-row major">'+
						'			<label>专业名称</label>'+
						'			<input type="text" placeholder="请填写专业名称" name="professionalName" value="'+item.professionalName+'" >'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>学校所在国家</label>'+
						'			<input type="text" placeholder="" name="schoolCountry" value="'+item.schoolCountry+'" >'+
						'		</div>'
						if (item.schoolCountry == "中国") {
						html+='	<div class="mui-input-row addrSelect">'+
						'			<label>学校地址</label>'+
						'			<div class="down-select showCityPicker">'+
						'				<label class="cityResult schoolAddrCity">'+(item.schoolProvince != ''?(item.schoolProvince+'-'+item.schoolCity+'-'+item.schoolArea):'省市区')+'</label>'+
						'				<img src="../img/detail/down_color_icon.png" />'+
						'			</div>'+
						'		</div>'
						}
						html+='	<div class="mui-input-row">'+
						'			<label></label>'+
						'			<input type="text" placeholder="详细地址（精确到门牌号）" name="schoolDetailed" value="'+item.schoolDetailed+'" >'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>入学时间</label>'+
						'			<div data-options=\'{"type":"date","beginYear":1900}\' class="down-select showDatePicker">'+
						'				<label class="dateResult educationStartTime">'+item.educationStartTime+'</label>'+
						'				<img src="../img/detail/down_color_icon.png" />'+
						'			</div>'+
						'		</div>'+
						'		<div class="mui-input-row">'+
						'			<label>毕业时间</label>'+
						'			<div data-options=\'{"type":"date","beginYear":1900}\' class="down-select showDatePicker">'+
						'				<label class="dateResult educationEndTime">'+item.educationEndTime+'</label>'+
						'				<img src="../img/detail/down_color_icon.png" />'+
						'			</div>'+
						'		</div>'
						if (cardLength > 1) {
						html+=	'<div style="padding:0 10px" class="mui-input-row">'+
						'			<button type="button" style="margin-top:6px;width:100%;" class="mui-btn mui-btn-danger mui-btn-block mui-btn-outlined delCard">删&nbsp;&nbsp;除</button>'+
						'		</div>'
						}
						html+='	</ul>'+
						'</div>';
			return html;
		}
		var _getParam = function(obj, param) {
			return obj[param] || '';
		};
		function getEducationListData() {
			base.setWait('正在获取数据');
			let url = base.url.getEducationList;
			var params = {
				customerId: customerId,
				applyCustomerId: applyCustomerId
			}
			base.postData(url, params, getEducationListSuccess)
		}
		function getEducationListSuccess(data) {
			if (data.success) {
				educationOtherId = data.extendData.educationOtherId;
				$("#educationResult").html(getWhetherStr(data.extendData.isEducation));
				if (data.extendData.isEducation == 1) {
					for (var index in data.extendData.educationList) {
						$("#educationCard").prepend(htmlCard(data.extendData.educationList[index]));
					}
					$("#addEducationRow").show();
					$("#educationCard").show();
				} else {
					mui.toast(data.message);
				}
			}
		}
		$(".transaction-container").on("tap", "button", function() {
			var url = base.url.addEducationInfo;
			var educationList = new Array();
			$("#educationCard").find(".mui-card").each(function(index, item){
				var _schoolAddrCity = '';
				if ($(this).find(".schoolAddrCity").text().indexOf("-")!=-1) {
					_schoolAddrCity = $(this).find(".schoolAddrCity").text().split("-");
				}
				var _educationEndTime = $(this).find(".educationEndTime").text();
				var itemParams = {
					educationId:$(this).find(".educationId-div").text(),
					schoolName:$(this).find("input[name='schoolName']").val(),
					schoolCountry:$(this).find("input[name='schoolCountry']").val(),
					educationType: getEducationValue($(this).find(".qualificationResult").text()),
					schoolProvince:_schoolAddrCity!=''?_schoolAddrCity[0]:_schoolAddrCity,
					schoolCity:_schoolAddrCity!=''?_schoolAddrCity[1]:_schoolAddrCity,
					schoolArea:_schoolAddrCity!=''?_schoolAddrCity[2]:_schoolAddrCity,
					schoolDetailed:$(this).find("input[name='schoolDetailed']").val(),
					professionalName:$(this).find("input[name='professionalName']").val(),
					educationStartTime:$(this).find(".educationStartTime").text(),
					educationEndTime: _educationEndTime != '至今则不填'?_educationEndTime:''
				}
				educationList.push(itemParams);
			});
			educationList = JSON.stringify(educationList);
			var _isEducation = getWhetherValue($("#educationResult").text());
			var params = {
				customerId: customerId,
				applyCustomerId: applyCustomerId,
				educationOtherId: _isEducation==1?'':educationOtherId,
				isEducation: _isEducation,
				educationParameter: _isEducation==1?educationList:""
			};
			console.log(params);
			base.postData(url,params,addEducationInfoSuccess);
		})
		function addEducationInfoSuccess(data) {
			mui.toast(data.message);
			if (data.success) {
				setTimeout(function() {
					mui.back();
				}, 1000);
			}
		}
	</script>
</body>
</html>
